изменить выравнивание текста в соответствии с мобильным устройством в Bootstrap 4

Question

У меня есть горизонтальная метка и текстовое поле.Когда я отображаю в маленьком устройстве, он показывает, как показано ниже изображение ..

Я хочу отобразить Имя по левомув небольших устройствах.Я использовал нижеуказанный код

 <div class="row">
    <div class="col-sm-4 text-right">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

Пожалуйста, помогите мне ..

Answer 1

Использование только начальной загрузки

---

<div class="row">
    <div class="col-sm-4 text-md-right text-sm-left" >
        <label for="firstname" class="control-label">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

Answer 2

Нет ничего встроенного в загрузчик для этого, но некоторые простые CSS могут это исправить.Нечто подобное должно работать.

<div class="row">
    <div class="col-sm-4 text-right mob-text-left">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>



@media (max-width: 768px) {
      .mob-text-left {
              text-align: left;
       } 
    }