rearranging 3 divs with css

Question

I want to change the order of two divs. The HTML:

<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>

Looks like this on a big screen: <-- [social] -->

I need to change that for small (mobile) devices to:
<-- -->
[social]

Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.

Answer 1

You might find this useful.

This link shows different types of css styles depending on the media (depending on the size of the view screen). http://css-tricks.com/resolution-specific-stylesheets/

:)

Answer 2

So @acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.

I went ahead and made a jsFiddle: Demo

HTML

<div class="navCont">
  <div class="arrowPrev">&larr;</div>
  <div class="arrowNext">&rarr;</div>
  <div class="socialButtons">Social Buttons</div>
</div>

CSS

.navCont {
    background: #f6f6f6;
    border-radius: 5px;
    clear: both;
    overflow: hidden;
    padding: 5px 10px;
}

.arrowPrev {
    float: left;
}

.socialButtons {
    text-align: center;
}

.arrowNext {
    float: right;
}


@media (max-width: 320px) {
  .socialButtons {
    float: none;
    clear: both;
  }
}

So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.

The CSS is very straight forward and I just added a little style to make it clear.

Answer 3

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }