1 part of the sidebar at top, rest at bottom
-
04-10-2020 - |
문제
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
해결책
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>
다른 팁
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>