webとモバイルでtableの表示を変える方法

検索ボックスとはなんでしょう？

プルダウンボックスを2つ並べて検索でsubmitします。
そちらの機能はできています

いや、機能の話ではなく構造のことを聞いていたのですが、こういうことですかね

select1
select2
select3
submit

↓

select1 select2 select3 submit

こういうことですか？

すみません、、
PCだと
select1 select2 select3 submit

モバイルだと
select1
select2
select3
submit

このようにしたいです、、、><

では、構造的にテーブルは、各selectを区切っているだけですか？

つまり、

[table]
  [tr]
    [td]select1[/td]
    [td]select2[/td]
    [td]select3[/td]
  [/tr]
[/table]

とか、あるいは

[table]
  [tr]
    [td]select1 select2 select3[/td]
  [/tr]
[/table]

みたいな感じでしょうか？

はい！そうです、、

サンプル: 画面サイズによって横並び縦並び・flex | js fiddle

2つ例を出してみました。
tableはレスポンシブにできなくもないですけれどもそのままではjQuery等が必要になるかと思うので、cssのみでできるようにulを利用した例になります。
またjsFiddleではscssで書いた時に、compile後のcssソースが出ないので、プレフィクスはありません。これは何を意味するかというと、chrome,firefoxは正しく表示できるだろうけれどもそれ以外は対応してないと無理という事です。

よって正しく表示させるためにはcodepenなどで、scssを書けば良いことになりますが、見た目がこれで良いかどうかの確認として一度見てみて下さい。

1つ目のulはflexがliにかかっています。
2つ目はselectにかかっています。

どういう違いがあるかは右下のresultと左下のjavascriptの境界をマウスで動かしてもらったらわかると思います。