Bootstrap вложенный столбец не работает на мобильном устройстве

Question

Я создаю веб-сайт, но моя сетка столбцов bootstrap работает нормально для экранов ноутбуков и планшетов. Но не работает нормально для мобильных

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border border-primary rounded" style="background-color:#0275d8;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="col-md-11 col-sm-11 col-xs-11">
                                                <h2>Who we are</h2>
                                                <hr>
                                                <p>Scaoasijdaosijdoaisdjh.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border border-success rounded" style="background-color:#5cb85c;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="col-md-11 col-sm-11 col-xs-11">
                                                <h2>What we do</h2>
                                                <hr>
                                                <p>textxtxttx</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

в основном для этого контента, есть один столбец с пустой рамкой цвета, который ведет себя как маркер / нумерация в левом столбце, а остальные столбцы имеют текст (h2, hr, p) на правой стороне пули. На экране мобильного телефона пуля попала в другие мои оставшиеся столбцы. в чем проблема, которую я не могу решить ??

Answer 1

Я сделал то, что вы хотите:

кодовый блок: https://codepen.io/Rishab2019/pen/JjYrLEB

.col-md-11, .col-sm-11, .col-xs-11{
  position:fixed!important;
  margin-left:80px;
  
}

.new1{
  margin-left:-30px;
  margin-top:-9px;
}


.row1{
  
 
   
  position:fixed; 
  display:inline;
  margin-left:500px;
  width:700px;
  
  
  
  
  
}

.row{
  
 
  
  position:fixed; 
  display:inline;
  
  width:800px;
  
  
  
}

.para{
  float:left;
  position:fixed;
  margin-top:40px;

}
.para1{
  float:left;
  position:fixed;
  margin-top:40px;
}


hr{
  width:700px;
  float:left;
 }

.border1{
  position:absolute;
  margin-left:-100px;

}

@media all and (max-width:768px){

.row{
position:fixed;

}
  
  .row1{
position:fixed;
width:100%;
margin-left:450px;
}
  .head{
  font-size:25px;
  
}
  hr{
  width:250px;
  margin-left:0px;
  
  
}

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                  <div class="row">
      <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
       <span class="border border-primary rounded" style="background-color:#0275d8;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">Who we are</h2>
                                                <hr>
                                              <p class="para">Scaoasijdaosijdoaisdjh.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row1">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border1 border-success rounded" style="background-color:#5cb85c;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new1 col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">What we do</h2>
                                                <hr>
                                                <p class="para1">textxtxttx</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Аналогично, вы можете использовать медиа-запросы для дополнительных модификаций.