Responsive Design, how to change order from div containers?

Question

I am just starting with responsive webdesign. I have a 2 column layout (sidebar and content).

  <div class="main-container">
        <div class="main wrapper clearfix">
    <div class="con1">      
               <header>
                    <h1>container 1 h1</h1>
                    <p>text1</p>
                </header>
                <section>
                    <h2>overview section h2</h2>
                    <p> test</p>
                </section>

  </div>
  <div class="con2">
                <header>
                    <h1>container 2 article header h1</h1>
                    <p></p>
                </header>
                <section>
                    <h2>article section h2</h2>
                    <p>text</p>
                </section>
            </div>

            <aside>
                <h3>aside</h3>
                <p>text</p>
            </aside>

        </div> <!-- #main -->
    </div> <!-- #main-container -->

The content got 2 div container. On a small screen I want

Div1

Div2

On a large screen I want them swapped,

Div2

Div1

In my CSS I now got the following Media Query:

 @media only screen and (min-width: 768px) {
 .main div.con1 {
    float: right;
    width: 57%;
}

.main div.con2 {
    float: right;
    width: 57%;
}

Is it possible to swap the order around and if so, how can I do it? Anyone got maybe a link to a good tutorial?

Thanks a lot in advance !

possible duplicate of [Use CSS to reorder DIVs](http://stackoverflow.com/questions/220273/use-css-to-reorder-divs) — Ryan Gates, Nov 24 '14 at 14:03

score 4 · Answer 1 · edited May 23 '17 at 12:23

4

The method used in the StackOverflow question "CSS positioning div above another div when not in that order in the HTML" seems to be your best bet.

edited May 23 '17 at 12:23

Community

1
1

answered Oct 11 '12 at 20:21

Ryan Gates

4,501
6
50
90

score 1 · Answer 2 · answered Jul 24 '15 at 11:05

with js:

//on load
responsive_change_box_order();
//on resize
 window.addEventListener('resize', responsive_change_box_order );

function responsive_change_box_order() {
   if (window.matchMedia("(max-width: 1118px)").matches) {
       jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
   }
   else{
       jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
   }

}

Eggineer · Answer 3 · 2017-06-14T11:30:31.667

This snippet uses flexbox and related properties to meet your end requirement.Also kindly note that you use use appropriate vendor prefixes for flexbox when you implement or use something like autoprefixer or prefixfree.

.main{
  display:flex;
  flex-direction:column
}

.con1{
  order:2;
  background-color: green;
}
.con2{
  order:1;
   background-color: red;
}

/*For Large screen only*/
@media(min-width:1200px){
  .con1{
    order:1;
  }
  .con2{
    order:2;
  }
}

<div class="main-container">
  <div class="main wrapper clearfix">
    <div class="con1">
      <header>
        <h1>container 1 h1</h1>
        <p>text1</p>
      </header>
      <section>
        <h2>overview section h2</h2>
        <p> test</p>
      </section>
    </div>
    
    <div class="con2">
      <header>
        <h1>container 2 article header h1</h1>
        <p></p>
      </header>
      <section>
        <h2>article section h2</h2>
        <p>text</p>
      </section>
    </div>

    <aside>
      <h3>aside</h3>
      <p>text</p>
    </aside>

  </div>
  <!-- #main -->
</div>
<!-- #main-container -->

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](http://meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted](http://stackoverflow.com/help/deleted-answers). — mrun, Jun 14 '17 at 10:28

Responsive Design, how to change order from div containers?

3 Answers3