別の画面サイズで別の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の下に表示されていないので、私は表示することによって、その変更をしていました。しかし、今私はテキストの横の側を取得し、テキストはスペースを許すために左に移動したいと考えています。 1つは、モバイルビューでは、タイトルが完全に押しつぶされます。

私は何かのように厚くなっている可能性が高いですが、見ることができます。

@media (max-width: 762px){ 
 
.listing-item__logo{ 
 
\t float: right; 
 
\t display: inherit !important; 
 
\t vertical-align: text-bottom !important; 
 
\t 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

コードは、この作品のような

ウィルの何かを更新しましたか？

@media (max-width: 762px){ 
 
.listing-item__logo{ 
 
\t float: right; 
 
\t display: inherit !important; 
 
\t vertical-align: text-bottom !important; 
 
\t 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>

Answer 2

限りあなたの要素はあなたの説明テキストおよびヘッダの後に（ボタン）コードの先頭で出力されるように、clear:both;を適用しfloat:right;を維持することは、のレベルで右浮くようになります説明段落テキスト。

!importantを使用する代わりに、指定されたCSSルール（現在適用されているルール）の現在の特定レベルが何であるかを確認し、同等またはそれ以上の選択肢を提供するだけです。 !importantを使用すると、通常、応答性やブラウザ間の振る舞いの点で、解決するよりも多くの問題が発生します。

Answer 3

pullブートストラップを試しましたか？
http://getbootstrap.com/css/#grid-column-ordering

・ホープ、このヘルプ