CSSの列応答的な問題

Question

私は、ここに私の学校で他の生徒のための教育リソースを提供するために、CSSでシンプルなウェブサイトを構築しています。私はBootstrap Columnsに行くことに決めました。問題は私たちの学校のデスクトップコンピュータにあり、タブレットはサイズを縮小するのではなく、列を異なる行に積み重ねます。

ここでは、関連するHTMLコードのすべてがある：

<!-- Left Side Bar --> 
    <div style="background-color:#F3F8FC;" class="col-lg-2 mobile-hide" ><!-- Not Displayed on Mobile --> 
     <div class="fotd"> 
      <div class="fotd-title"> 
       <h4>Fact Of The Day</h4> 
      </div> 
      <p>Text</p> 
     </div> 

     <div class="twitter mobile-hide"> 
      <a class="twitter-timeline" href="https://twitter.com/RHL_Inspire" data-widget-id="720721136867282945">Tweets by @RHL_Inspire</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
     </div> 
    </div> 

<!-- Center Content --> 
    <div class="col-lg-7 "> 
     <h3 class="content title">Letter from The Editor In Narwhal</h3> 
     <p class="content" > 
     This is a link. <a href="/math">This is the actual link</a> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis,  
     </p> 
    </div> 



<!-- Right Side --> 
    <div style="background-color:#F3F8FC;" class="col-lg-3 mobile-hide"> 
     <h3 class ="center mobile-hide">Editors Picks!</h3> 
      <ul class="stickynote mobile-hide"> 
       <li class="stickynote mobile-hide"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 
      </ul> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <footer>&copy; 2016 The StickyNote | <a href="http://www.google.ca">Google</a></footer> 
      </div> 
     </div> 

Answer 1

問題は、我々は列の2つのサイズを指定するには、コードを変更しなければならなかったということでした。元のコードの例では、我々は持っていた：小さな錠剤のような画面（および低解像度のデスクトップコンピュータのために使用されます

<div style="background-color:#F3F8FC;" class="col-lg-7 col-sm-7"> 

col-sm-7：

<div style="background-color:#F3F8FC;" class="col-lg-7"> 

これは単純に変更しなければなりませんでした。