WordPress CSS макет боковой панели

Question

У меня есть веб-сайт HTML и блог-аддон в WordPress. Мне удалось создать тему моего блога WordPress, чтобы он интегрировался в мой веб-сайт, однако у меня возникли проблемы с версткой. Сайт блога: https://www.smilehawthorn.com.au/blog/

На снимке экрана ниже показан фрагмент изображения в мобильном представлении.

Это код в настоящее время для моего 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;
	}
}
	

В мобильном представлении я хотел бы переместить боковую панель (последние сообщения и архивы) в конец содержимого публикации и использовать ее на всю ширину. страницы и их содержание, также используйте всю ширину страницы.

Заранее благодарим за любые советы или помощь.

Answer 1

Элемент aside на панели ac-content-sidebar имеет максимальную ширину 250 пикселей и ширину 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

Это "должно" сделать это.