html - 使用媒体查询使 div 响应

Question

我正在尝试创建响应式网络，但在执行媒体查询时遇到了问题。我想要一个特定的 div 放在某些 div 的底部。我是 CSS 的新手。有人可以帮我解决这个问题吗？

我希望“即将发生的事件”和它的“内容”到“最新消息” Div 的底部。即将发生的事件及其内容是不同的div。在 (min-width: 1025px) 和 (max-width: 1260px) 内。

这是我想放在底部的 2 个 div 的原始 css 代码。

// this is the title div. The "Upcoming Events"
.title2{
  background:none repeat scroll 0 0 #FFFFFF;
  padding-top: 19px;
  padding-left: 15px;
  padding-bottom: 5px;
  margin-left: -7px;
  width: 270px;
  box-shadow: 0 0 3px #ccc;
  display:block;

}
//here's the content
.sidebar{
  background:none repeat scroll 0 0 #FFFFFF;  
  padding:19px;
  width: 270px;
  box-shadow: 0 0 3px #ccc;
  display:block;
  max-height: 374px;
  -webkit-font-smoothing: antialiased;
}


 //news div
    .leftbar{
  background:none repeat scroll 0 0 #FFFFFF;
  padding:19px;
  width: 250px;
  box-shadow: 0 0 3px #ccc;
  display:block;
  max-height:741px; 
  overflow-y:scroll;
  margin-left: 20px; 

}
//latest news title div
 .title{
  background:none repeat scroll 0 0 #FFFFFF;
  padding-top: 19px;
  padding-left: 19px;
  padding-right: 19px;
  padding-bottom: 5px;
  width: 250px;
  box-shadow: 0 0 3px #ccc;
  display:block;
   margin-left: 20px; 

}

我的媒体查询

@media(min-width: 1025px) and (max-width: 1260px){
   .img-responsive{
    width: 260px;
    height:70px;
  }
  .navbar-default .navbar-right > li > a {
  padding: 0 10px;
  margin-right:6px;
 }
    .leftbar{


}
.title{


}
.title2{


}
.sidebar{

}
}

Answer 1

将最新消息容器的宽度设为100%

@media (min-width: 1025px) and (max-width: 1260px)
{
    .title2, .sidebar{
       width : 100% !important;
       max-width : 100% !important;
    }
}