如何将2列彼此放在一起

Question

如何让两列彼此相邻。第一个将有文本，第二个将是一个列表。这是标题部分，可能有背景图像。我使用bootstrap v3.3.4，HTML5和CSS3

我附上了我想要完成的事情。

<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>            
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>            
</div>
</div>
</div>
</div>
</div>
</section>

CSS

.about-us {
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}

.about-us h2 {
font-size: 650%;
font-weight: 400;
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
}

.about-us .block {
position: relative;
padding: 340px 0px 0px;
z-index: 99;
text-align: center;
}

新代码：

<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-3  col-md-offset-3 col-sm-3 col-sm-offset-3">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-   duration="900ms">
<h2>sample</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
</div>
</div>
</div>
</div>
</div>
</section>

CSS

.about-us {
background-image:linear-gradient(rgba(18, 172, 234, 0.42), rgba(0, 191, 255,          0.55)),url(background-about-header.png);
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}

#about-us h1 {
font-size: 400%;
font-weight: 400;
text-transform: none;
color: #fff;
text-align: justify;
margin: auto;
text-shadow: 2px 2px 1px rgba(56, 56, 56, 0.73);
}


.about-us h2 {
font-size: 750%;
font-weight: 400;
text-transform: uppercase;
color: #fff;
line-height: 80px;
padding-top: 70px;
padding-right: 20%;
margin: auto;
text-shadow: 3px 3px 2px rgba(56, 56, 56, 0.73);
}





#about-us .block {
position: relative;
padding: 205px 0px 0px;
text-align: center;
margin: auto;
}

媒体查询

#about-us .block {
padding: 0px;
}

#about-us h1 {
text-align: justify;
margin-left: 20%
}

#about-us h2 {
padding-top: 150px;
padding-bottom: 30px;
margin-left: 10%
}

@media only screen and (max-width: 767px) {
.about-us h1,h2 {
font-size: 16px;
}   

Answer 1

display:flex或display:table或display:inline-block可以执行此操作：

display:flex

.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row,.col-md-6  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.col-md-6 {
flex:1;
  padding:1em;
}

<section id="about-us" class="about-us">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

＆安培; display:table

.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row {
  display:table;
  table-layout:fixed;
}
.col-md-6 {display:table-cell;
  vertical-align:middle;
  text-align:center;
  padding:1em;
}

<section id="about-us" class="about-us">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

＆安培; display:inline-block

.about-us h2 {
  /*font-size: 650%;
font-weight: 400;*/
  margin-bottom: 0px;
  text-transform: uppercase;
  color: #666;
  margin: auto;
}
 .col-md-6 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 1em;
}

<section id="about-us" class="about-us">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
          <h2>WE ARE</h2>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>