Change float behaviour of div elements

Question

I have the following divs:

html:

<div class="side left">
    <span>left</span>
</div>
<div class="side right">  
    <span>right</span>
</div>

css:

.side 
{
  height: 100px;       
  width: 400px;
  float: left;
}
.left{ background-color: red;}
.right{ background-color: blue;}

fiddle: http://jsfiddle.net/39xn180y/

when i minimize my browser-window width they float this way:

question: is there a easy (css) way to make them float that way without changing the html:

@NenadVracar - sure as long as i don't have to change the html — Byyo, Jan 29 '16 at 12:38

score 2 · Accepted Answer · answered Jan 29 '16 at 12:44

You can do this with Flexbox and Media Queries. With flexbox you can change order of elements and with @media queries you can set when to change that order. Here is Fiddle

body {
  display: flex;
  margin: 0;
  padding: 0;
}

.side {
  height: 100px;
  flex: 0 1 400px;
}

.left{ background-color: red; text-align: center;}
.right{ background-color: blue; text-align: center;}

@media(max-width: 800px) {
  body {
    flex-wrap: wrap;
  }
  
  .left {
    order: 2;
  }
}

<div id="start" class="side left">
    <span>left</span>
</div>
<div id="end" class="side right">
    <span>right</span>
</div>

divy3993 · Answer 2 · 2016-01-29T13:16:45.407

I would insist you to use CSS - Flex. Little changs to your CSS and "HTML"(too) helps what you want to achieve.

I think this might help you:

Working Demo - UPDATE

HTML

<span class="xyzContainer">
  <div id="start" class="side left">
    <span>left</span>
  </div>
  <div id="end" class="side right">
    <span>right</span>
  </div>
</span>

Note : Wrapped your both div's with span as container for both of them.

CSS

.xyzContainer
{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  margin:0px;
  padding:0px;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.side {
  height: 100px;
  width: 400px;
  float: left;
}

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

span {
  text-align: center;
  display: block;
  margin: 3px auto;
}

@media screen and (max-width: 815px) {
  .left
  {
    order: 2;
  }
}

Note : The trick here is done by the display:flex that applied to container with order:2 to .left class.

score 1 · Answer 3 · answered Jan 29 '16 at 12:56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
  .side 
{
  height: 100px;       
  width: 400px;
  float: left;
}
 @media screen and (max-width : 480px)
  {
           #blockContainer {
                               display: -webkit-box;
                               display: -moz-box;
                               display: box;
                              -webkit-box-orient: vertical;
                              -moz-box-orient: vertical;
                              box-orient: vertical;
                           }
#blockA {
    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     box-ordinal-group: 2;
}
#blockB {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
                  }
  </style>
  </head>
  <body>
    <div id="blockContainer">
    <div class="side" id="blockA" style="background:red;">Block A</div>
    <div class="side" id="blockB" style="background:blue;">Block B</div>

</div>
  </body>
</html>

score 0 · Answer 4 · answered Jan 29 '16 at 12:26

0

you have to check device size and then change float css attribute
otherwise use bootstrap Greed system..

answered Jan 29 '16 at 12:26

Sarjerao Ghadage

1,420
16
31

change float css attribute how? can you show me the code? – Byyo Jan 29 '16 at 12:27
@media screen and (max-width : 480px) { #divid { float:left !important; } } – Sarjerao Ghadage Jan 29 '16 at 12:31
can you please update the fiddle? i don't understand your answer – Byyo Jan 29 '16 at 12:38

score 0 · Answer 5 · edited May 23 '17 at 11:52

0

You can use flex box

with search I found this where is accepted answer aswell Change order of floated divs with CSS

"When you use flexbox you can use the order property on items to dictate which order items appear in"

edited May 23 '17 at 11:52

Community

1
1

answered Jan 29 '16 at 12:31

Thorax

57
5

score 0 · Answer 6 · answered Jan 29 '16 at 13:05

you can use display-flex property to reverse

here is css of that

body{
  display: flex; 
  flex-direction: column-reverse;
  display: -webkit-flex; 
  -webkit-flex-direction:column-reverse;
}

and here is the fiddle of that http://jsfiddle.net/w2ph516y/

Change float behaviour of div elements

6 Answers6