1

Okay, so I have a sidebar in one of my CMS pages. This sidebar has 3 static blocks:

  • a menu (accordeon on mobile devices)
  • a contact block
  • an USP block

The HTML is roughly set up like this:

<div class="content">

   <p>Some content</p>

</div>

<div class="sidebar">

  <div class="block"><!-- static block -->
    <h5>Menu</h5>
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>

  <div class="block"><!-- static block -->
    <h5>Contact us</h5>
    <p>Some text related to contacting the vendor</p>
  </div>

  <div class="block"><!-- static block -->
    <ul class="usp">
      <li>USP</li>
      <li>USP</li>
      <li>USP</li>
    </ul>
  </div>

</div>

The sidebar is on the right of the page. When I switch to a mobile device (770px media query), I want ONLY the menu block to be at the top of the page. The rest of the sidebar has to display at the bottom of the page. How do I do this, without changing HTML, and not using bad practice?

Structure how I want it on mobile devices:

  • Menu block
  • Content
  • Contact block
  • USP block
1

An container added wrapped to all block

.container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.container .content {
    width: 100%;
    float: left;
    padding: 0 20px;
}
.container .sidebar {
    float: right;
    width: 100%
    padding: 0 20px;
}
@media (max-width:700px) {
    .container {
        flex-wrap: wrap;
    }
    .container .content {
        order: 2;
        width: 100%;
    }
    .container .sidebar {
        order: 1;
        width: 100%;
    }
}

<div class="container">
    <div class="content">

        <p>Some content</p>

    </div>

    <div class="sidebar">

        <div class="block"><!-- static block -->
            <h5>Menu</h5>
            <ul>
                <li>menu item</li>
                <li>menu item</li>
                <li>menu item</li>
                <li>menu item</li>
            </ul>
        </div>

        <div class="block"><!-- static block -->
            <h5>Contact us</h5>
            <p>Some text related to contacting the vendor</p>
        </div>

        <div class="block"><!-- static block -->
            <ul class="usp">
                <li>USP</li>
                <li>USP</li>
                <li>USP</li>
            </ul>
        </div>

    </div>
</div>

https://jsfiddle.net/karthikannan/zwzyfdv0/

  • This places the sidebar above the content, and that is not what I'm asking :p – Maarten Wolfsen Dec 12 '16 at 11:47
  • 1
    You can re-arrange the block as per your need with the help of Order:1,2,3... – karthick Dec 12 '16 at 12:22
0

For your old question

 .container {
  max-width:700px;
  margin:0 auto;
  display: flex;

} .container .content { width:calc(100% - 280px); float:left; padding:0 20px; } .container .sidebar { float:right; width:200px; padding:0 20px; }

@media (max-width: 700px) {

  .container {
    flex-wrap: wrap;
}
.container .content {
 order: 2;
 width: 100%;

} .container .sidebar { order: 1; width: 100%; } }

<div class="container">
  <div class="content">
    <p>
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
        Some content and a good story about the website.
    </p>
</div>
<div class="sidebar">
   <h3>
     Sidebar navigation
 </h3>
 <ul>
     <li>Menu item</li>
     <li>Menu item</li>
     <li>Menu item</li>
     <li>Menu item</li>
     <li>Menu item</li>
 </ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.