Responsive layout in which left column may move to the right - css

Question

Say we have this responsive design with 3 columns (all 3 are dynamic contents so we don't know their heights)
For desktop:
For tablet (left column moves to the right)
What's the best way we can achieve this? (I don't mind using flexbox or other modern css specs)

Answer 1

You can make the elements make float: left on desktop with with 1/3 width each, then on tablet/mobile give them 50% width and make 1 and 3 float: right.
HTML:
<div class="b1">
1
</div>
<div class="b2">
2
</div>
<div class="b3">
3
</div>
CSS:
div {
float: left;
width: calc(100%/3);
box-sizing: border-box;
}
#media (max-width: 600px) {
div {
width: 50%;
}
.b1,
.b3 {
float: right;
}
}
Working JSFiddle

Answer 2

div{
border: 1px solid #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
float: left;
}
.div1{
background : yellow;
width: 25%;
}
.div2{
background : red;
width: 50%;
min-height: 400px;
}
.div3{
background : purple;
width: 25%;
}
#media (max-width: 768px){
.div1, .div3{
clear: right;
float: right;
width: 30%;
}
.div2{
width: 70%;
}
}
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
https://jsfiddle.net/yuywh5gv/

Answer 3

Try this, it might help. You can edit CSS as your wish
HTML code:
<div class="wrapper">
<div class="left"> 1 </div>
<div class="middle">2 </div>
<div class="right"> 3 </div>
</div>
CSS code:
.wrapper div {float:left;margin-right:.5%;text-align:center;}
.wrapper div:last-child {margin-right:0;}
.left {background: yellow; width:33%}
.middle {background: green; width:33%}
.right {background: blue; width:33%}

Answer 4

# Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px)
<div class="b1 col" >1</div>
<div class="b2 con">2</div>
<div class="b3 col">3</div>
add style bellow ::
div {
border: 2px solid black;
padding: 20px;
float: left;
box-sizing: border-box;
}
.con{
width: 66.66%;
}
div.col {
width: 16.5%;
}
.b1 {
height: 50px;
border-color: #ee8;
}
.b2 {
height: 200px;
border-color: #fcc;
}
.b3 {
height: 80px;
border-color: #caf;
}
#media screen and (min-width:321px) and (max-width:768px) {
div.col {
width: 33.33%;
}
.b1,
.b3 {
float: right;
}
}
DEMO