How to Change Side by Side Divs to Stack on Mobile

How to change side by side divs to stack on mobile?

Update

Added a flexbox approach below:

UPATED JSFIDDLE

.wrap {

  display: flex;

}

.one {

  width: 30%;

  border: 1px solid green;

}

.two {

  width: 70%;

  border: 1px solid blue;

}

@media (max-width: 767px) {

  .wrap {

    flex-direction: column-reverse;

  }

  .one,

  .two {

    width: auto;

  }

}

<div class="wrap">

  <div class="one">1</div>

  <div class="two">2</div>

</div>

Two Divs next to each other, that then stack with responsive change

You can use CSS3 media query for this. Write like this:

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Check this for more http://jsfiddle.net/cUCvY/1/

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

side by side divs stack on window resize

Use float:right and change the order of your html.

.right-div {

  float: right;

  width: 30%;

  background-color: red;

}

.left-div {

  float: right;

  width: 70%;

}

@media screen and (max-width: 1100px) {

  .container > div {

    width: 100%;

  }

}

<div class="container" style="max-width: 1100px;">

  <div class="right-div">RIGHT DIV</div>

  <div class="left-div">LEFT DIV</div>

</div>

divs side by side mobile responsive issue

Add Bootstrap CDN link to head of html file links provided here https://www.bootstrapcdn.com/ after that utilize the bootstrap grid system info here https://getbootstrap.com/docs/4.0/layout/grid/ so just add the class 'col-xs-12' to your 'float-container' div and then for every 'float-child' div add the class 'col-xs-6'

---

Related Topics