1 part of the sidebar at top, rest at bottom

Question

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

Answer 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/

Answer 2

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>