Wordpress 投稿一覧の要素の位置を画面幅に応じて変更する

現在WordpressでWebページを作成しております。
テーマはLightningを使用しております。

投稿一覧ページで、一つの記事部分の構成を、web版では画像の上、スマホ版では下のように表示したいと考えております。
web版でもwindowの幅を768px以下にした場合には、スマホ版のような表示にしたいのでcssで@media screen and (max-width: 768px)のような形でできればと考えたのですが、cssのみで行うことは可能でしょうか。
今までは、wordpressデフォルトの状態からdisplay:noneなどでうまく表示できたのですが、ここまで位置変更はうまくできずこちらに質問させていただきました。

jqueryなどで要素の位置を変更するなどする必要がありますでしょうか。

参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

html
1
2<article class="media">
3<div id="post-XX" class="post-XX post type-post status-publish format-standard has-post-thumbnail">
4	<div class="news_page_title">
5	情報を更新しました。
6	</div>
7	<div class="entry-meta">
8	</div>
9	<div>
10		<div class="media-left postList_thumbnail">
11		</div>
12		<div class="media-body">
13		</div>
14	</div>
15</div>
16</article>
17

Lhankor_Mhy

2019/09/06 03:30

たぶん、typoです。 <div class="entry-meta"> </div> </div> ↓ <div class="entry-meta"> </div> <div>

lyzmfeqpxs54

2019/09/06 06:33

ご指摘ありがとうございます。修正いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

たとえば、こんな感じで。
サンプル

css
1.post{
2  display: flex;
3  flex-flow: wrap;
4}
5.news_page_title,.entry-meta{
6  width: 100%;
7}
8.post div:not(.news_page_title),.post div:not(.entry-meta){
9  display: flex;
10  flex-flow: wrap;
11}
12
13@media screen and (max-width: 768px){
14  .post .media-body:not(.dummy){
15    display: none;
16  }
17  .news_page_title{
18    width:50%;
19    order:1;
20  }
21  .entry-meta{
22    order:1;
23  }
24}