更改迷你列的位置（CSS）

Question

我是HTML和CSS的新手，尝试做一个简单的网站。

这里是我的问题：

我有4列，在全尺寸的照片，但是当我最小化浏览器，它得到这种丑陋的定位..我想右图浮动权，但如果我设定了这一点，当它们全尺寸时会很糟糕。

我的问题是：当您最小化浏览器时可以更改组件float吗？我希望所有4张照片全尺寸左移，第一个左移，第二个右移只有2列，当我只有一个非常小的列时，我希望该照片居中。

这里是我的HTML：

<div class="container panel panel-default mygallery"> 
<div class="panel-heading text-center"><big class="h3">Most popular</big></div> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <div class="panel panel-default mypanel"> 
       <div class="panel-heading"> 
        <a data-toggle="collapse" href="#"> 
         <h4> Mozart apartment.</h4> 
        </a><small>Nr. camere: 3</small></br> 
         <small>Pret: 200.000 <div class="glyphicon glyphicon-euro"></div></small></br> 
         <small>Suprafata: 130 m<sup>2</sup></small> 
       </div> 
       <div class="panel-body in img-1"></div> 
      </div> 
     </div> 
</div> 
</div> 

所有4列有相同的代码，唯一的信息是不同的。

和CSS：

.mygallery { 
    padding-left: 0px; 
    padding-right: 0px; 
    margin-left: 20px; 
    margin-right: 20px; 
    height: auto; 
    width: auto; 
} 

.mypanel { 
    float:left; 
    overflow: hidden; 
    border-style: solid; 
    border: 10px; 
    height: 320px; 
    width: 100%; 
    max-width: 320px; 
} 

.img-1 { 
    background: url("MostPopular/1.jpg"); 
    background-repeat: no-repeat; 
    border-style: solid; 
    border-color: white; 
    border-radius: 10px; 
    width: 100%; 
    height: 65%; 
} 

Answer 1

它通过使用媒体查询在这里你可以了解更多有关其

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

您可以添加特定的CSS不同尺寸是可能的。

你可以给不同的列不同的风格：第n个孩子（）

https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

您应该使用@media选择了这种事情，在这里你可以设置为造型浏览器的宽度，所以你会碰到这样的：

@media screen and (min-width:1200px) { 
    //your style here 
} 

你可以阅读更多关于这个here