Search code examples
htmlcsstwitter-bootstrapmedia-queries

How to move a div below another on different screen size

I am trying to get this moved below however I am not getting the right results. This is on a CMS based website, so I seem to only get access to the CSS.

enter image description here

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

by default this logo isn't displayed below 762px, so I had alter that by the display. But now I would like to get that side beside the text and the text move to the left, to allow for space. As for one, when this is in mobile view, the title gets completely squashed.

I'm more than likely being thick as anything but shall see.

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

Solution

  • Code Updated

    Will something like this work?

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