chat

by bd22

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-2 leftCont">
      <div class="roomBox">
        a
      </div>
      <div class="roomPeopleBox">
        b
      </div>
    </div>

    <div class="col-lg-8 col-md-9 col-sm-12 col-lg-7 rightCont">

      <div class="chatMenu col-sm-12">
        menu
      </div>
      c
    </div>

    <div class="col-lg-2 dmSection">
      d
    </div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%
}
.chatMenu{
  background-color:gray;
}
.col {
  bo5rder: solid;
}

.container-fluid .row {
  height: 500px;
}

.rightCont {
  background-color: red;
}

.leftCont {
  background-color: green;
  height: 100%;
}

.dmSection {
  background-color: pink;
  height: 100%;
}

.roomBox {
  background-color: yellow;
  height: 30%;
}

.roomPeopleBox {
  background-color: blue;
  height: 70%
}

@media screen and (max-width:761px) {
  .dmSection {
    display: none;
  }
}

@media screen and (max-width:760px) {
  body {
    background-color: #333;
  }
  h1 {
    color: red;
  }
  p {
    color: white;
  }
  .leftCont {
    display: none;
  }
}

@media only screen and (min-width : 768px) {
.chatMenu{
  ddisplay:none;
}
}

/* Large */
@media only screen and (min-width : 1200px) {
.chatMenu{
  display:none;
}
}

/* Medium */
@media only screen and (max-width: 992px) {
  .dmSection {
    display: none;
  }
  .chatMenu{
  display:block;
}
}