Bootstrapで左寄せ・右寄せの要素を一行に共存させるには。

###前提・実現したいこと
Ruby on Railsにてbootstrapを使って、フロント実装をしています。
デザインに沿った実装がどうしても出来ないです。どうしたら宜しいでしょうか？
どうしても添付画像の下半分のような画面になってしまいます。

↓上半分が正しいデザイン・下半分が誤ったデザインです。

↓完成デザイン

###発生している問題・エラーメッセージ

・一行に右寄せ・左寄せの要素を共存できない。
・レスポンシブになるとB要素とC要素が縦並びになってしまう。

###補足情報(言語/FW/ツール等のバージョンなど)
Rails5
Ruby2.3.1
bootstrap3

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に書きましたが、下記の様なイメージでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>bootstrapTest</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <link href="css/bootstrap.min.css" rel="stylesheet">
8        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9        <script src="js/bootstrap.min.js"></script>
10    </head>
11    <body>
12        <div class="container">
13            <div class="form-group">
14                <div class="row">
15                    <div class="col-md-4 col-sm-6 col-xs-6"><input type="text" class="form-control" value="ここがコンテンツA"></div>
16                </div>
17                <div class="row">
18                    <div class="col-md-4 col-sm-6 col-xs-6"><input type="text" class="form-control" value="ここがコンテンツB"></div>
19                    <div class="col-md-offset-4 col-md-4 col-sm-6 col-xs-6"><input type="text" class="form-control" value="ここがコンテンツC"></div>
20                </div>
21            </div>
22        </div>
23    </body>
24</html>

デスクトップ

小さく

list-groupの書き方

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>bootstrapTest</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <link href="css/bootstrap.min.css" rel="stylesheet">
8        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9        <script src="js/bootstrap.min.js"></script>
10    </head>
11    <body>
12        <div class="container">
13            <div class="form-group">
14                <div class="row">
15                    <ul class="list-group">
16                        <li class="list-group-item-success">2017年05月10日
17                            <ul class="list-group">
18                                <li class ="list-group-item">
19                                    <div class="pull-left">hogehoge</div>
20                                    <div class="text-right">1,000円</div>
21                                </li>
22                            </ul>
23                        </li>
24                        <li class="list-group-item-danger">2016年09月30日
25                            <ul class="list-group">
26                                <li class="list-group-item">
27                                    <div class="pull-left">fugafuga</div>
28                                    <div class="text-right">10,000円</div>
29                                </li>
30                            </ul>
31                        </li>
32                    </ul>
33                </div>
34            </div>
35        </div>
36    </body>
37</html>