移動視圖的文章不起作用

我正在嘗試爲此頁面添加移動視圖。我希望文章和div.sidebar.col-md-4在移動視圖左側（側邊欄上方的文章）。這裏是鏈接到頁面：https://ewelinawoloszyn.github.io/Press/#mm-0 移動視圖的文章不起作用

這裏是我的代碼

@media (min-width: 992px){ 
div.sidebar.col-md-4 { 
    float: right !important; 
     width: 162px !important; 
} 
} 
@media (min-width: 1200px){ 
    div.sidebar.col-md-4 { 
float: right !important; 
     width: 162px !important; 

    } 
    article{width:50% !important; 
    float:left !important;} 
} 


div.profile p{ 
text-align: justify; 

} 
div.profile p a{ 
float:right; 

} 
div.profile ul{ 

    list-style: none; 
    padding-left: 0px; 
} 
h3.name{ 
    margin-bottom: 30px !important; 
} 
article{ 
    width: 50% !important; 
    float:left !important;} 

@media (min-width: 992px) 
.col-md-4 { 
    width: 33.3333%; 
} 
div.sidebar.col-md-4{ 
    float:right; 
    width:162px; 
} 
div.profile img{ 
    margin-bottom:20px; 
} 
img.arch{ 
    width:120px !important; 
    height:100px !important; 
     margin-top: 18px !important; 
     float: left !important; 
margin-right: 9px !important; 
} 
div#disqus_thread{ 
    float:left; 
     width: 523px; 
}

當我添加媒體查詢爲768px出現下面我不想左側菜單中的文章會發生什麼。如何在不重置1200px視圖的情況下添加移動視圖？

任何意見讚賞，親切的問候ネ

來源

2016-11-01 Neko

要精確當我添加代碼@media（min-width：768px）{article {clear：left; width：100％;}} 1200視圖顯示不正確，就好像此代碼重置1200視圖 – Neko

您可以給圖像你想在這裏實現？ –

http://www.ewelinawoloszyn.com/mymap/press.png – Neko

div.sidebar.col-md-4{ 
    float:right; 
    width:162px; 
}

移動此內部@media（最小寬度：768px），和剛剛定義另一個樣式寬度< = 768px

來源

2016-11-01 14:06:47

我按照您的建議做了，不幸的是文章移動到左側菜單下方，在中間欄留下空隙。如何解決它？這裏的鏈接：https：//ewelinawoloszyn.github.io/Press/ – Neko

刪除清除：左側; for @media（min-width：600px） –

我刪除了clear：left，但是文章和div.sidebar.col-md-4在移動視圖中位於彼此相鄰的兩列中。我需要他們成爲一個高於其他像這張圖片http://ewelinawoloszyn.com/mymap/press.png – Neko

移動視圖的文章不起作用

回答

相關問題