使用媒体查询使div响应

Question

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

我希望“即将发生的事件”以及“内容”深入“最新消息” Div。即将发生的事件及其内容是不同的div。在(min-width: 1025px) and (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;
    }
}

Answer 2

媒体查询很好但很耗时，而且可能会让你感到困惑。而不是媒体查询去引导程序。它干净且易于使用，您只需添加类名称，引导程序将为您完成所有操作。有关参考，请查看此link