如何在不同的屏幕尺寸上将 div 移动到另一个下方

Question

我正在尝试将其移至下方，但是我没有得到正确的结果。这是一个基于 CMS 的网站，所以我似乎只能访问 CSS。

@media (max-width: 762px){
  .listing-item__logo{
     float: right;
     display: inherit !important;
     vertical-align: text-bottom !important;
     width: 50% !important;
  }
}

默认情况下，此徽标不会显示在 762 像素以下，因此我通过显示对其进行了更改。但现在我想把那一边放在文本旁边，文本向左移动，以留出空间。至于一个，当它在移动视图中时，标题会被完全压扁。

我很可能很厚实，但应该会看到。

@media (max-width: 762px){
.listing-item__logo{
	 float: right;
	 display: inherit !important;
	 vertical-align: text-bottom !important;
	 width: 50% !important;
}
}

/***MY CODE ^^****/

/***ORIGINAL**/

.listing-item__logo {
    vertical-align: middle;
    min-width: 150px;
    width: 150px;
    text-align: center;
    position: relative; }
  @media all and (max-width: 992px) {
    .listing-item__logo {
      min-width: 170px;
      width: 170px; } }
  .listing-item__logo.listing-item__resumes {
    min-width: 125px;
    width: 125px;
    padding-right: 21px; }
  @media all and (max-width: 767px) {
    .listing-item__logo {
      display: none; } }
  .listing-item__logo .media-object:not(.profile__img) {
    max-width: 125px;
    max-height: 125px;
    margin-right: 15px;
    display: inline-block; }

<article class="media well listing-item listing-item__jobs  ">
  <div class="media-left listing-item__logo">
    <a href="https://energymaniacs.net/job/73250/planner/">
      <img class="media-object profile__img-company" src="https://energymaniacs.net/files/pictures/orion_1.png" alt="Orion Group">
    </a>
  </div>
  <div class="media-body">
    <div class="media-heading listing-item__title">
    <a href="https://energymaniacs.net/job/73250/planner/" class="link">Planner</a>
    </div>
    <div class="listing-item__info clearfix">
    <span class="listing-item__info--item listing-item__info--item-company">
    Orion Group
    </span>
    </div>
    <div class="listing-item__desc hidden-sm hidden-xs">
    Our client is currently recruiting for the position of a Planner based in Aberdeen, Aberdeen-Shire.
    </div>
  </div>
  <div class="media-right text-right">
    <div class="listing-item__date">
    Mar 02, 2017
    </div>
  </div>
  <div class="listing-item__desc visible-sm visible-xs">
  Our client is currently recruiting for the position of a Planner based in Aberdeen, Aberdeen-Shire.
  </div>
</article>

Answer 1

你试过pull的bootstrap吗？
http://getbootstrap.com/css/#grid-column-ordering

希望有帮助

Answer 2

代码更新

这样的东西会起作用吗？

@media (max-width: 762px){
.listing-item__logo{
	 float: right;
	 display: inherit !important;
	 vertical-align: text-bottom !important;
	 width: 50% !important;
}

.listing-item .media-body, .listing-item__desc, .listing-item__info--item-company, .media-right {
float: left;
max-width: 50%;
clear: left;
}

/***MY CODE ^^****/

/***ORIGINAL**/

.listing-item__logo {
    vertical-align: middle;
    min-width: 150px;
    width: 150px;
    text-align: center;
    position: relative; }
  @media all and (max-width: 992px) {
    .listing-item__logo {
      min-width: 170px;
      width: 170px; } }
  .listing-item__logo.listing-item__resumes {
    min-width: 125px;
    width: 125px;
    padding-right: 21px; }
  @media all and (max-width: 767px) {
    .listing-item__logo {
      display: none; } }
  .listing-item__logo .media-object:not(.profile__img) {
    max-width: 125px;
    max-height: 125px;
    margin-right: 15px;
    display: inline-block; }

<article class="media well listing-item listing-item__jobs  ">
  <div class="media-left listing-item__logo">
    <a href="https://energymaniacs.net/job/73250/planner/">
      <img class="media-object profile__img-company" src="https://energymaniacs.net/files/pictures/orion_1.png" alt="Orion Group">
    </a>
  </div>
  <div class="media-body">
    <div class="media-heading listing-item__title">
    <a href="https://energymaniacs.net/job/73250/planner/" class="link">Planner</a>
    </div>
    <div class="listing-item__info clearfix">
    <span class="listing-item__info--item listing-item__info--item-company">
    Orion Group
    </span>
    </div>
    <div class="listing-item__desc hidden-sm hidden-xs">
    Our client is currently recruiting for the position of a Planner based in Aberdeen, Aberdeen-Shire.
    </div>
  </div>
  <div class="media-right text-right">
    <div class="listing-item__date">
    Mar 02, 2017
    </div>
  </div>
  <div class="listing-item__desc visible-sm visible-xs">
  Our client is currently recruiting for the position of a Planner based in Aberdeen, Aberdeen-Shire.
  </div>
</article>