imporve respnsive ui

resources/assets/vue/components/addresses/elements/SelectAddressComponent.vue

@@ -5,12 +5,16 @@
                 <div class="col-auto p-r-0">
                     <i class="fa fs-20 p-t-5" :class="{'fa-circle-o': value !== item.id, 'fa-check-circle': value === item.id, 'text-primary': value === item.id}"></i>
                 </div>
-                <div class="col-3">
-                    <h6 class="no-margin bold fs-12">{{item.reference}}</h6>
-                </div>
-                <div class="col text-left">
-                    <h6 class="no-margin fs-12">{{item.street_one}} {{item.street_two}}, {{item.district.name}}, {{item.post_code}} {{item.state.name}}, {{item.country.name}}</h6>
-                </div>
+               <div class="col">
+                   <div class="row align-items-center">
+                        <div class="col-12 col-sm-3 pb-1 pb-sm-0">
+                            <h6 class="no-margin bold fs-12 text-left">{{item.reference}}</h6>
+                        </div>
+                        <div class="col-12 col-sm-9 text-left">
+                            <h6 class="no-margin fs-12">{{item.street_one}} {{item.street_two}}, {{item.district.name}}, {{item.post_code}} {{item.state.name}}, {{item.country.name}}</h6>
+                        </div>
+                   </div>
+               </div>
                 <div class="col-auto">
                     <div class="row align-items-center">
                         <div class="col-auto p-r-5">

resources/assets/vue/components/addresses/forms/AddressFormComponent.vue

@@ -20,13 +20,13 @@
                         </div>
                     </div>
                     <div class="row m-b-15">
-                        <div class="col-12 col-md p-r-5 pb-3 pb-md-0 ">
+                        <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                             <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
                                 <label>District</label>
                                 <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
-                        <div class="col-12 col-md p-l-5">
+                        <div class="col-12 col-md pl-md-1">
                             <validation-wrapper-component :validator="$v.parameters.post_code">
                                 <label>Post Code</label>
                                 <input class="form-control" name="post_code" v-model="parameters.post_code">

resources/assets/vue/components/orders/forms/ChangeOrderAddressFormComponent.vue

@@ -39,7 +39,7 @@
                 <div class="col no-padding">
                     <div class="row">
                         <div class="col"></div>
-                        <div class="col-7">
+                        <div class="col-12 col-sm-7">
                             <h6 class="text-right fs-12 text-danger m-b-15 text-right">**You delivery address change request will be approved after being reviewed, once it's approved your order delivery address will be updated.</h6>
                         </div>
                     </div>