CSS Floats, Change Order on Mobile Layout

CSS floats, change order on mobile layout?

Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.

CSS:

#sidebar {
    float: left;
    width: 30%;
}

#content {
    float: right;
    width: 70%;
}

.mobile #sidebar,
.mobile #content {
    float: none;
    display: block;
    margin-bottom: 15px;
}

Standard HTML:

<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

Mobile HTML:

<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

CSS mobile change float order

Here's a fiddle: https://jsfiddle.net/tw0akjjj/

I changed two things:

1.) Put the media query below the other rules, since the left and right classes will override it otherwise

2.) Added a rule for the images (.half img) to have 100% width inside their (responsive, changing) container

ADDITION/EDIT:

Please note the updated fiddle: https://jsfiddle.net/tw0akjjj/2/

I turned around the order of the DIVs for the second row in the HTML and set the DIVs in that second row to float: right.

In the desktop version this becomes

text image
image text

in the mobile version:

text
image
text
image

Manipulate Float Order CSS on mobile

If you use flex or grid instead float , you can use order :

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

example with a flex container + order.

#float1 {

  order: 1;

  background: red;

  width: 100px;

  height: 100px;

}

p {

flex:1;

/* default order is 0;*/

}

section {/* it could be body, but i think you better use a container */

  display: flex;

  flex-wrap: wrap;

}

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

  p {

    flex-basis:100%;/* it will use the whole width, flex children will wrap */

  }

}

<section>

  <div id="float1">float one </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>

</section>

Change order of floated divs with CSS

I know that you're asking how to accomplish this utilising floats, but as far as I know using pure CSS this is impossible (at least without using nasty positioning, which you've said you don't want to do).

As far as I know the only nice way to accomplish this with pure HTML/CSS is to utilise the new flexbox spec (a good starting point would probably be this css tricks article).

When you use flexbox you can use the order property on items to dictate which order items appear in (duh)

You can see an example of this in action here, the HTML code is similar to what you have, with an added wrapper element (I also fixed the DOCTYPE declaration):

<!DOCTYPE html>
<div class="wrapper">
    <div class="yellow">
    </div>
    <div class="red">
    </div>
</div>

The CSS is a little different:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.yellow {
    background: yellow;
    width: 20%;
    height: 300px;
}

.red {
    background: red;
    width: 20%;
    height: 300px;
}

@media screen and (max-width:600px) {
    .yellow {
        order: 2;
        width: 100%;
    }

    .red {
        order: 1;
        width: 100%;
    }
}

I've also cleaned it up a little, you had duplicate code in your media query which didn't really need to be there.

The only downside to this is that it currently only works on around 80% of browsers as of writing:

http://caniuse.com/#search=flexbox

Depending on your target market that might be OK, you could use graceful degradation so that it appears correctly in all ways except the ordering on devices that don't support flexbox fully.

I guess you're also only really targeting mobile devices with reordering things, support there is good so it might work well for you.

CSS responsive 2 column layout item ordering issue

Sounds like this could be solved perfectly with css grids.
This allows you to mix and position it ay way you want. Using flexbox would also be an option. Or you could change your HTML to have columns devided into rows instead of the other way around. If you place the 2 columns underneath each other, you'll have the same result.

https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "one three"
    "two four";
}

.container div:nth-child(1) { grid-area: one; }
.container div:nth-child(2) { grid-area: two; }
.container div:nth-child(3) { grid-area: three; }
.container div:nth-child(4) { grid-area: four; }

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "one"
      "two"
      "three"
      "four";
  }
}

<div class="container">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
</div>

Special arrangement of columns in Desktop and re-order columns in Mobile responsive using Bootstrap 4

Flexbox started with alpha 6, so the beta really wouldn't make a huge difference in this case (although the class names have changed from alpha-6 to beta). Bootstrap 4 (stable) is out today (1/18/18).

When using flexbox, the cols in each row are the same height, which won't work for your desired desktop layout. I would use d-md-block on the row to override the display:flex on larger (md) screens. Then use float-left and float-right to position the cols on desktop. The flexbox will still kick in on smaller screens so the floats will be ignored and cols will stack vertically as expected.

https://www.codeply.com/go/sTvrYlB1V0

<div class="container-fluid">
  <div class="row h-100 d-md-block d-flex">
    <div class="col-12 col-md-4 float-left">
      1 Some content
    </div>
    <div class="col-12 col-md-4 float-left">
      2 Some content
    </div>
    <div class="col-12 col-md-4 special-height float-right">
      3 Some other content
    </div>
    <div class="col-12 col-md-8 special-height-small mt-2 float-left">
      4 Special content
    </div>
  </div>
</div>

Change div order with CSS depending on device-width

This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.

The solution takes into consideration all the constraints you listed:

Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.

Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.

.container div {

    width: 100px;

    height: 50px;

    display: inline-block;

}

.one { background: red; }

.two { background: orange; }

.three { background: yellow; }

.four { background: green; }

.five { background: blue; }

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

    .container { display: flex; flex-flow: column; }

    .five { order: 1; }

    .four { order: 2;  }

    .three { order: 3; }

    .two { order: 4; }

    .one { order: 5 }

}

<div class="container">

    <div class="one">I'm first</div>

    <div class="two">I'm second</div>

    <div class="three">I'm third</div>

    <div class="four">I'm fourth</div>

    <div class="five">I'm fifth</div>

</div>

How do I change the order of elements and control flow in responsive css

You could set float: left also on .description paragraph on desktop.css stylesheet. This will make expand your paragraph in its own "column".

Then, remember to also apply a clearing to .container element

Div re-order with CSS

Depending on what browsers you need to support you could use the flex-box. Using a media query for screen size you could then set the order of the second and third boxes to switch below a certain screen width.

I've done a pen with a short example. I'd also recommend the CSS Tricks Complete Guide to Flexbox which talks about how to use flex far better than I can.

EDIT:

The basic principle would be to set the parent element (e.g., container) to display: flex ; this generates the flexbox and allows you to set different parameters for the children.

Using the following HTML:

<div class="container">
  <div class="box first">
    Box 1
  </div>
  <div class="box second">
    Box 2
  </div>
  <div class="box third">
    Box 3
  </div>
</div>

If I set display:flex on .container, I can then set whether the content should display in a row or column, should wrap down a line, have space between or around the elements, etc. I've set the main rule to be a wrapping row using flex-flow (which is a shorthand for two other flex properties, including flex-direction which I need later), with space between the elements.

.container{
  display:flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

I then use a media query so when the browser is narrower than a specified width, the flex-direction gets changed from row to column

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
 }

Then, in the same media query, I need to tell the elements that I want to re-order what order they should be in:

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
  .second{
    order: 3;
  }
  .third{
    order: 2
  }
}

Sometimes I've noticed that order needs to be defined for all the elements, so you might need to set it for the first block and keep it as order: 1 . From the pen linked to above, it doesn't seem to be the case here, but it something to keep an eye out for in other projects.

CSS Floats, Change Order on Mobile Layout