Bootstrap col-md, col xs, col sm ayarları

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    <!-- Bootstrap -->

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="~/BenimStyles.css" rel="stylesheet" />

    <div class="container">

         <!-- Her row, Container içinde bulunmalı -->

        <!-- Her row'un genişlik ayarı ayrı ayrı düşünülmeli (her satır 12 ye tamamlanmalı)-->

        <!-- Genişlik ayarı girilen bir satır başka bir genişlik girdisiyle override edilmediği sürece (örneğin col-xs-6 gibi)

        kendi ve kendinden büyük genişlik ayarları için geçerli olacaktır

        örneğin col-xs-6 değeri girilmiş ise;

        Bu değer medium ve large sayfalar için de geçerli olacaktır (otomatikman)

            Aşağıdaki örnekler browser'da çalıştırıldığında konu anlaşılacaktır.

        -->

        <div class="row">

            @*  row 1  *@

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

                <div class="Benim-Row">Left</div>

            </div>

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

                <div class="Benim-Row">Main</div>

            </div>

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

                <div class="Benim-Row">Right</div>

            </div>

        </div>

        <div class="row">

            @*  row 2  *@

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

                <div class="Benim-Row"> Left Content</div>

            </div>

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

                <div class="Benim-Row">Main Content</div>

            </div>

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

                <div class="Benim-Row"> Right Content</div>

            </div>

        </div>

        <div class="row">

            @*  row 3  *@

            <div class="col-md-3 col-lg-9 col-sm-6">

                <div class="Benim-Row"> Column 1</div>

            </div>

            <div class="col-md-3 col-lg-3 col-sm-6">

                <div class="Benim-Row">Column 2</div>

            </div>

            <div class="col-md-3 col-lg-9 col-sm-6">

                <div class="Benim-Row"> Column 3</div>

            </div>

            <div class="col-md-3 col-lg-3 col-sm-6">

                <div class="Benim-Row"> Column 4</div>

            </div>

        </div>

        <div class="row">

            @*  row 3  *@

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

                <div class="Benim-Row"> Column 1</div>

            </div>

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

                <div class="Benim-Row">Column 2</div>

            </div>

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

                <div class="Benim-Row"> Column 3</div>

            </div>

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

                <div class="Benim-Row"> Column 4</div>

            </div>

        </div>

        <div class="row">

            @*  row 3  *@

            <div class="col-xs-3">

                <div class="Benim-Row"> Column xs 1</div>

            </div>

            <div class="col-xs-3">

                <div class="Benim-Row"> Column xs 2</div>

            </div>

            <div class="col-xs-3">

                <div class="Benim-Row"> Column xs 3</div>

            </div>

            <div class="col-xs-3">

                <div class="Benim-Row"> Column xs 4</div>

            </div>

        </div>

    </div>