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

Question

I'm trying to achieve something that I am sure should be easier than I am making it!

I am using the Skeleton responsive framework, and have been fine up until now.

Here is a diagram of what I want to achieve.

This will be placed within a column. Once that columns reduces in size, I would like it to stack the divs as per the second example in the diagram. I've tried a few different ways, but keep getting it wrong.

I am pretty new to HTML/CSS so any help is appreciated! Many thanks!

Answer 1

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/

Answer 2

today this kind of thing can be done by using display:flex;

https://jsfiddle.net/suunyz3e/1435/

html:

  <div class="container flex-direction">       <div class="div1">         <span>Div One</span>       </div>       <div class="div2">         <span>Div Two</span>       </div>   </div> 

css:

.container{   display:inline-flex;   flex-wrap:wrap;   border:1px solid black; } .flex-direction{   flex-direction:row; } .div1{   border-right:1px solid black;   background-color:#727272;   width:165px;   height:132px; }  .div2{   background-color:#fff;   width:314px;   height:132px; }  span{   font-size:16px;     font-weight:bold;     display: block;     line-height: 132px;     text-align: center; }  @media screen and (max-width: 500px) {   .flex-direction{   flex-direction:column;   } .div1{   width:202px;   height:131px;   border-right:none;   border-bottom:1px solid black;   }   .div2{     width:202px;     height:107px;   }   .div2 span{     line-height:107px;   }  }