Bootstrap Столбцы не работают на экране телефона

Question

Я использовал bootstrap столбцы для отображения информации о моих пользователях. они хорошо смотрятся на экранах ноутбуков и настольных ПК, но на экране телефона второй столбец опускается, как будто там есть верхнее поле. как я могу решить это?

<div class="row">
    <!-- Location -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-map-marker-alt font-14 mr-3"></i> From</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Country</span></div>
    </div>
</div>
<div class="row">
    <!-- Joined -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-user-alt font-14 mr-3"></i> Member since</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Mon Year</span></div>
    </div>
</div>
<div class="row">
    <!-- Jobs Done -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-check-circle font-14 mr-3"></i> Jobs Done</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right"><span class="font-700 mr-3">Number</span></div>
    </div>
</div> 

Answer 1

Попробуйте этот код:

<div class="row">
    <!-- Location -->
    <div class="col-6">
        <div class=""><i class="fas fa-map-marker-alt font-14 mr-3"></i> From</div>
    </div>
    <div class="col-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Country</span></div>
    </div>
</div>
<div class="row">
    <!-- Joined -->
    <div class="col-6">
        <div class=""><i class="fas fa-user-alt font-14 mr-3"></i> Member since</div>
    </div>
    <div class="col-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Mon Year</span></div>
    </div>
</div>
<div class="row">
    <!-- Jobs Done -->
    <div class="col-6">
        <div class=""><i class="fas fa-check-circle font-14 mr-3"></i> Jobs Done</div>
    </div>
    <div class="col-6">
        <div class="text-right"><span class="font-700 mr-3">Number</span></div>
    </div>
</div> 

Answer 2

Col sm работает только от @media (min-width: 576px) Так что просто попробуйте col-6 для каждого экрана