0

I have a site which displays correctly on medium port devices. However on small screen devices, I need a couple of changes to it.

I need it to display 2 fields each on a row, the first field of which is displayed only on xs devices. 

<div class="container mt-2">
    <div class="row medrow rowhead text-white border border-info" id="medrow1">
        <div class="col-sm-2 d-none d-sm-block">
            Code
        </div>
        <div class="col-sm-8 d-none d-sm-block">
            Name
        </div>
        <div class="col-sm-3 d-none d-sm-block">
            Rate (NABH)
        </div>
        <div class="col-sm-3 d-none d-sm-block">
            Rate (Non-NABH)
        </div>
        <div class="col-sm-8 d-none d-sm-block">
            Section
        </div>

    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            291
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Adenoidectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            6,486
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            5,640
        </div>
        <div class="col-sm-8">
            <a href="/app/category/9">TREATMENT PROCEDURE ENT</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            337
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Resection Enucleation of thyroid Adenoma
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            12,167
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            10,580
        </div>
        <div class="col-sm-8">
            <a href="/app/category/10">TREATMENT PROCEDURE FOR HEAD AND NECK</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            341
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Excision of Parathyroid Adenoma/Carcinoma
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            24,466
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            21,275
        </div>
        <div class="col-sm-8">
            <a href="/app/category/10">TREATMENT PROCEDURE FOR HEAD AND NECK</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            686
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Laparotomy pelvic Lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            1,380
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            1,200
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            687
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Laparoscopic pelvic Lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            4,025
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            3,500
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            704
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Radical Hysterectomy for Cancer cervix with pelvic
            lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            9,775
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            8,500
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            1049
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Paraortic Lymphadenoctomy with Nephrectomy for Wilms
            Tumour
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            23,000
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            20,000
        </div>
        <div class="col-sm-8">
            <a href="/app/category/58">TREATMENT PROCEDURE PAEDIATRIC SURGERY</a>
        </div>
    </div>

</div>

This is shown as per the screenshots. On Large screens On small screens

However on small screens, what I need is to display Code and the value that comes after it on one row. On the next row, I need Procedure and its value. I have used col-xs-12 to occupy half the available width, as my bootstrap grid is 24 columns wide instead of normal 12 column grid, by sass editing.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Joel G Mathew
  • 7,561
  • 15
  • 54
  • 86
  • Support for `col-xs-*` has been [dropped in v4](https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4/41795300#41795300). Use `col-*` instead of `col-xs-*`. [Docs here](https://getbootstrap.com/docs/4.3/layout/grid/#grid-options). – tao Feb 24 '19 at 02:36

1 Answers1

0

There are a few fixes to make to the class list that reads

d-xl-none d-lg-none d-md-none col-xs-12
  • Bootstrap classes are mobile-first so d-md-none will also hide the element at all breakpoints larger than md.
  • col-xs-12 could just be col-12
  • Col-12 is making the column take up the whole row. You could do something like col-4 to get a nice layout.

Altogether that means I'd try

col-4 d-md-none
JasonB
  • 6,243
  • 2
  • 17
  • 27