HTML入力フィールドtabindexの問題

Question

ブートストラップを使用してHTMLフォームを作成していますが、入力フィールドのインデックスに問題があります。

フィールドは、デスクトップに並べて表示されます（1行の2つのフィールド）。ここでタブを押すと、カーソルは2行目の最初のフィールドに移動します。これは必要ありません。だから私はその問題を使用して修正しましたtabindex

モバイルで入力フィールドが1つずつモバイル（1フィールドごとに）表示されるため、モバイルでもう1つ問題が発生します。我々は最初のフィールドからのタブを押すと、それは非常に奇妙に見えるれ、3番目のフィールドに行くと、私はそれを修正したい...

ここで生き例です：

デスクトップ：

.col-md-6{ 
 
width: 50%; 
 
float:left; 
 
}

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

モバイル：

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

は、どのように私はこの問題を解決することができますか？

Answer 1

てみ包むあなたの質問のタイトルが奇数であるcols codepen