如何将div中的文本放在另一个指定div之上

Question

美好的一天。我正在尝试使用bootstrap创建标题部分。但我面临着一个问题。请先检查我的脚本

#banner{
	background-color: black;
	height: 150px;
}

#banner p{
	color: white;
}

#Intro p{
	font-size: 12px;
	color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="pull-right" id="Intro">
	<p>Customer Care | Login | Daftar</p>
</div>

<div id="banner" class="row">
	<div class="col-md-7">
		<p>asdfadsf</p>
	</div>
</div>



<nav class="navbar cstm navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
   
    </div>
  </div>
</nav>

我的脚本位于#Intro的位置上方，位于#banner内。如何将#Intro位置置于#banner之上？所以最新的位置是这样的（从上面）1。#Intro 2。#banner 3. .navbar。

提前致谢。

我的预期结果

Answer 1

您的意思是这样吗？我在clear:both

中添加了#banner

#banner {
  clear: both;
  background-color: black;
  height: 150px;
}

#banner p {
  color: white;
}

#Intro p {
  font-size: 12px;
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="pull-right" id="Intro">
  <p>Customer Care | Login | Daftar</p>
</div>

<div id="banner" class="row">
  <div class="col-md-7">
    <p>asdfadsf</p>
  </div>
</div>



<nav class="navbar cstm navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

Answer 2

从

更改您的代码

<div class="pull-right" id="Intro">
<p>Customer Care | Login | Daftar</p>
</div>

<div id="banner" class="row">
<div class="col-md-7">
    <p>asdfadsf</p>
</div>
</div>

要

<div class="row">
   <div class="col-md-12">
     <div class="text-right" id="Intro">
        <p>Customer Care | Login | Daftar</p>
     </div>
   </div>

   <div class="col-md-12">
     <div id="banner">
    <p>asdfadsf</p>
     </div>
   </div>
   <div class="col-md-12">
       <div id="banner">
          <p>asdfadsf</p>
       </div>
   </div>
</div>

Answer 3

从#Intro div中删除右拉类。它使div浮动，从而使其脱离正常的文档流。