按css

Question

我想使用css重新排序页面上的元素，但我找不到方法 我尝试了我在这里找到的所有解决方案但没人工作 我的HTML代码是由WordPress生成的，为什么我无法更改html代码，我想成为所有帖子，但我没有办法做到这一点

＆＃13;

＆＃13;

<article id="post-2433" class="et_pb_post clearfix post-2433 post type-post status-publish format-standard has-post-thumbnail hentry category-microsoft category-trucs-et-astuces">
			<div class="et_pb_image_container">	
				<a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/" class="entry-featured-image-url">
					<img src="http://cismdomain.com/wp-content/uploads/2017/02/Logo-Edge-400x250.png" alt="Les 5 astuces sur Microsoft Edge" height="250" width="400">
				</a>
			</div>
			<h2 class="entry-title"><a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/">Les 5 astuces sur Microsoft Edge</a></h2>
			<p class="post-meta">
				<span class="published">Mar, 2017</span>
				|  
				<a href="http://cismdomain.com/category/microsoft/" rel="category tag">Microsoft</a>,
				<a href="http://cismdomain.com/category/trucs-et-astuces/" rel="category tag">Trucs et astuces</a>
			</p>
			<div class="post-content">
				<p>
					Microsoft Edge ce n’est pas juste un navigateur Web de recherche, mais aussi un outil complet que vous permet de créer des listes de lectures et écriture.
				</p>
				<a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/" class="more-link">read more</a>
			</div>			
</article>

＆＃13;

＆＃13;

＆＃13;

我想在不使用jquery的情况下进行显示，我可以使用javascript

＆＃13;

＆＃13;

1- <h2 class="entry-title">
2- <p class="post-meta">
3- <div class="et_pb_image_container">
4- <div class="post-content">

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在子项上使用flex order属性。

article.post {
  display: flex;
  flex-direction: column;
}

.entry-title, .post-meta {
  order: -1;
}

<article id="post-2433" class="et_pb_post clearfix post-2433 post type-post status-publish format-standard has-post-thumbnail hentry category-microsoft category-trucs-et-astuces">
  <div class="et_pb_image_container">
    <a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/" class="entry-featured-image-url">
      <img src="http://cismdomain.com/wp-content/uploads/2017/02/Logo-Edge-400x250.png" alt="Les 5 astuces sur Microsoft Edge" height="250" width="400">
    </a>
  </div>
  <h2 class="entry-title"><a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/">Les 5 astuces sur Microsoft Edge</a></h2>
  <p class="post-meta">
    <span class="published">Mar, 2017</span> |
    <a href="http://cismdomain.com/category/microsoft/" rel="category tag">Microsoft</a>,
    <a href="http://cismdomain.com/category/trucs-et-astuces/" rel="category tag">Trucs et astuces</a>
  </p>
  <div class="post-content">
    <p>
      Microsoft Edge ce n’est pas juste un navigateur Web de recherche, mais aussi un outil complet que vous permet de créer des listes de lectures et écriture.
    </p>
    <a href="http://cismdomain.com/les-5-astuces-sur-microsoft-edge/" class="more-link">read more</a>
  </div>
</article>

Answer 2

您可以使用flex-box

#post-2433{
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.et_pb_image_container{
  order: 3;
}
.entry-title{
  order: 1;
}
.post-content{
  order: 4;
}
.post-meta{
 order: 2;
}