html - 如何将div移动到屏幕的右侧

Question

我试图将我的 第二个 div 放在页面的右侧。

显然第二个 div 应该在第一个 div 的右侧。目前就在第一个 div 下面，我想把它放在第一个 div 的右侧，并且应该保持响应

我试图将我的 第二个 div 放在页面的右侧。

显然第二个 div 应该在第一个 div 的右侧。目前就在第一个 div 下面，我想把它放在第一个 div 的右侧，并且应该保持响应

我如何使用 css 完成此操作。

 <div class="container col-md-12 col-md-offset-0">
        <div class="well well bs-component">
        <form class="form-horizontal" method="post">
        {!! csrf_field() !!}

       <--1st div -->
        <div class="form-group">
        <label for="name" class="col-lg-1 control-label">Phone</label>    
        <div class="col-lg-8">
        <input type="text" class="typeahead  form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
        </div>
        </div>

        <div class="form-group">
        <label for="name" class="col-lg-1 control-label"> Name</label>
        <div class="col-lg-8">
        <input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
        </div>
        </div>
        <--End of 1st div -->


       <--2nd div -->
        <div class="panel">
        <div class="panel_1">
        <table class="table">
          <thead>
     <tr> 
      <th>Name</th>
      <th>Country</th>
     </tr>
     </thead>
     </table>                                                                                                                                                          
        </div>
        </div>
       <--End of 2nd div -->



       <--3rd div -->
              <div class="row">
                <div class="col-md-9">

                  <div  class="nav-tabs-custom" id="tabs">

                    <ul class="nav nav-tabs">
                    @foreach($countries as $country)

                       <li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
                       @endforeach


                    </ul>
                    <div class="tab-content">
                    @foreach($countries as $key => $country)

                      <div class="tab-pane" id="tab_{{ $country->id }}">
                      <table class="table" id="tables">
                                        <thead>
                                            <tr> 
                                                <th></th>
                                                <th colspan="5"></th>
                                                <th></th>
                                            </tr>
                                       </thead>
                                       <tbody id="food_list">
                      @foreach($country->teams as $team)
                                         <tr>
                                            </tr>
                      @endforeach       
                   </tbody>
                   </table>
                     </div>
                    @endforeach     
                      </div>    

                    </div>

                  </div>

                </div>
       <--End of 3rd div -->


        </form>
        </div>
        </div>

Answer 1

    <div class="container col-md-12 col-md-offset-0">
    <div class="well well bs-component">
    <form class="form-horizontal" method="post">
    {!! csrf_field() !!}

   <!--1st div --><div class="col-xs-12 col-sm-6">
    <div class="form-group">
    <label for="name" class="col-lg-1 control-label">Phone</label>    
    <div class="col-lg-8">
    <input type="text" class="typeahead  form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
    </div>
    </div>

    <div class="form-group">
    <label for="name" class="col-lg-1 control-label"> Name</label>
    <div class="col-lg-8">
    <input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
    </div>
     </div></div>
    <!--End of 1st div -->


   <!--2nd div --><div class="col-xs-12 col-sm-6">
    <div class="panel">
    <div class="panel_1">
    <table class="table">
      <thead>
 <tr> 
  <th>Name</th>
  <th>Country</th>
 </tr>
 </thead>
 </table>                                                                                                                                                          
    </div>
     </div></div>
   <!--End of 2nd div -->



   <!--3rd div -->
          <div class="row">
            <div class="col-md-9">

              <div  class="nav-tabs-custom" id="tabs">

                <ul class="nav nav-tabs">
                @foreach($countries as $country)

                   <li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
                   @endforeach


                </ul>
                <div class="tab-content">
                @foreach($countries as $key => $country)

                  <div class="tab-pane" id="tab_{{ $country->id }}">
                  <table class="table" id="tables">
                                    <thead>
                                        <tr> 
                                            <th></th>
                                            <th colspan="5"></th>
                                            <th></th>
                                        </tr>
                                   </thead>
                                   <tbody id="food_list">
                  @foreach($country->teams as $team)
                                     <tr>
                                        </tr>
                  @endforeach       
               </tbody>
               </table>
                 </div>
                @endforeach     
                  </div>    

                </div>

              </div>

            </div>
   <!--End of 3rd div -->
   </form>
   </div>
   </div>