css - WordPress CSS 侧边栏布局

Question

我有一个 HTML 网站和一个 WordPress 插件博客。我已经设法为我的 WordPress 博客设置主题，以便它集成到我的网站中，但是，我遇到了布局问题。博客网站是https://www.smilehawthorn.com.au/blog/

下面的屏幕截图是它在移动 View 中的截图。

这是我的 style.css 当前的代码。我尝试修改@media 变体的代码，但我无法让它工作。

/* Base style */
/**************/

.ac-content-sidebar {
  padding: 5px;
  background: #fff !important;
  background-image: none;
  color: rgb(102, 102, 102);
  margin-bottom: 10px;
}
/* Content */

div#ac-main-content {
  display: block;
  float: left;
  width: 70%;
}

div#ac-main-content a {
  color: #337ab7;
  font-size: unset;
}

div#ac-main-content.ac-full {
  width: 100%;
}

#ac-main-content article {
  width: 100%;
  float: none;
  margin: 0;
  text-align: left;
}

#ac-main-content article.post + article.post {
  margin-top: 35px;
}

#ac-main-content article.post h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

#ac-main-content article.post div.entry {
  margin: 10px 0;
  font-size: 13px;
}

#ac-main-content article.post div.entry ol {
  padding: 0 20px;
}

#ac-main-content article.post div.entry p {
  color: rgb(102, 102, 102);
  font-size: 13px;
  text-align: left;
  padding: 0;
}
/* Sidebar position */

.ac-content-sidebar > aside {
  display: block;
  float: left;
  width: 30%;
  max-width: 250px;
  height: auto;
}

aside.ac-sidebar + div#ac-main-content {
  margin-left: 3%;
}

div#ac-main-content + aside.ac-sidebar {
  margin-left: 3%;
}

/* Sidebar */

aside.ac-sidebar {
  background: #fff !important;
  background-image: none;
  width: 30%;
}

aside.ac-sidebar a {
  color: #78A89C !important;
  font-size: unset;
}

aside.ac-sidebar h3 {
  font-size: 22px;
  color: #333333;
}

aside.ac-sidebar > div {
  margin-bottom: 20px;
}

aside.ac-sidebar form#searchform input#s {
  width: 100%;
  max-width: 150px;
}

aside.ac-sidebar h3 {
  margin-bottom: 5px;
}

aside.ac-sidebar .widget,
aside.ac-sidebar .widget-title {
  position: float;
  height: auto;
}

aside.ac-sidebar .widget {
  padding: 0 0 5px 5px;
  text-align: left;
}

aside.ac-sidebar ul {
  padding-left: 0;
  min-height: auto !important;
}

aside.ac-sidebar ul > li {
  float: none;
  list-style: outside none none;
  color: rgb(102, 102, 102) !important;
}

aside.ac-sidebar label {
  color: inherit;
}




/**********************/
/* Your customization */
/**********************/

/* Add your rules here */
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.wp-admin #wpabar {
     top: -28px !important;
}
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

@media only screen and (max-width: 767px) {

        .ac-content-sidebar {
                position: static;
                top: 355px;
                left: 5%;
                right: 5%;
                z-index: 20;
                width: 100%;
        }

        #content {
                margin-top: 250px;
        }

        .ac-content-sidebar #sidebar .widget {
                margin-left: 0;
                margin-right: 0;
                width: 100%;
                float: none;
        }

}
@media only screen and (min-width: 768px) {
	aside.sidebar {
		position: absolute;
		left: 40px;
		top: 255px;
	}
}
	

我想做的是在移动 View 中，将侧边栏(最近的帖子和文件)移动到帖子内容的底部并让它使用页面的整个宽度并让内容使用整个宽度页面也是如此。

提前感谢您提供任何提示或帮助。

Answer 1

ac-content-sidebar 中的 aside 元素的最大宽度设置为 250px，宽度为 30%。

如果您将以下 css 规则添加到您对 767 像素以下的所有内容的查询中，它将变为全宽。

.ac-content-sidebar > aside{
  width: 100%;
  max-width: none;
}

div#ac-main-content{
  width: 100%;
}

现在，至于重新排序元素，这有点棘手，需要一点 flexbox。

对于 .ac-content-sidebar 添加以下规则:

display: flex;
flex-direction: column

对于.ac-sidebar，添加以下规则:

order: 2

对于.ac-main-content，添加以下规则:

order: 1

那个“应该”做的。