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

Question

我试图让这个移到下面但是我没有得到正确的结果。这是基于CMS的网站，所以我似乎只能访问CSS。

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

默认情况下，此徽标不会显示在762px以下，因此我在显示屏上进行了更改。但是现在我想把文字放在旁边，文字向左移动，以留出空间。至于一，当这是在移动视图中时，标题被完全压扁。

我很可能像任何东西一样厚，但应该看到。

@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>