diff --git a/public/css/custom.css b/public/css/custom.css
index ddeeec072..74313b6e3 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -236,11 +236,6 @@ button:focus
 }
 /*--------Form Group Finish--------*/
 
-.item-action
-{
-    padding-left: 21px !important;
-}
-
 /*--Long Texts--*/
 .long-texts
 {
diff --git a/resources/views/purchases/bills/create.blade.php b/resources/views/purchases/bills/create.blade.php
index dd520c6db..ef2c051b4 100644
--- a/resources/views/purchases/bills/create.blade.php
+++ b/resources/views/purchases/bills/create.blade.php
@@ -29,34 +29,34 @@
 
                     {{ Form::textGroup('order_number', trans('bills.order_number'), 'shopping-cart',[]) }}
 
-                    <div class="col-md-12 mb-4">
+                    <div class="col-sm-12 mb-4">
                         {!! Form::label('items', trans_choice('general.items', 2), ['class' => 'form-control-label']) !!}
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden ">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="d-flex flex-nowrap">
+                                    <tr class="row">
                                         @stack('actions_th_start')
-                                            <th class="col-md-1 border-right-0 border-bottom-0 item-action">{{ trans('general.actions') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-md-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-md-1 text-center border-right-0 border-bottom-0">{{ trans('bills.quantity') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('bills.quantity') }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-md-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
+                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-md-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-md-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
+                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -65,20 +65,20 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-md-11 text-right border-bottom-0"></td>
+                                            <td class="col-sm-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
                                         <tr class="row" id="tr-subtotal">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -88,7 +88,7 @@
 
                                     @stack('add_discount_td_start')
                                         <tr class="row" id="tr-discount">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -129,7 +129,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0">
+                                            <td class="col-sm-2 text-right border-bottom-0">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -140,10 +140,10 @@
 
                                     @stack('tax_total_td_start')
                                         <tr class="row" id="tr-tax">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -153,10 +153,10 @@
 
                                     @stack('grand_total_td_start')
                                         <tr class="row" id="tr-total">
-                                            <td class="col-md-10 text-right border-right-0">
+                                            <td class="col-sm-10 text-right border-right-0">
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right long-texts">
+                                            <td class="col-sm-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/purchases/bills/edit.blade.php b/resources/views/purchases/bills/edit.blade.php
index 94c11fea8..5cc4d6e74 100644
--- a/resources/views/purchases/bills/edit.blade.php
+++ b/resources/views/purchases/bills/edit.blade.php
@@ -30,34 +30,34 @@
 
                     {{ Form::textGroup('order_number', trans('bills.order_number'), 'shopping-cart',[]) }}
 
-                    <div class="col-md-12 mb-4">
+                    <div class="col-sm-12 mb-4">
                         {!! Form::label('items', trans_choice('general.items', 2), ['class' => 'control-label']) !!}
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="d-flex flex-nowrap">
+                                    <tr class="row">
                                         @stack('actions_th_start')
-                                            <th class="col-md-1 border-right-0 border-bottom-0 item-action">{{ trans('general.actions') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-md-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-md-1 text-center border-right-0 border-bottom-0">{{ trans('bills.quantity') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('bills.quantity') }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-md-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
+                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-md-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-md-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
+                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -66,20 +66,20 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-md-11 text-right border-bottom-0"></td>
+                                            <td class="col-sm-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
                                         <tr class="row" id="tr-subtotal">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -89,7 +89,7 @@
 
                                     @stack('add_discount_td_start')
                                         <tr class="row" id="tr-discount">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -130,7 +130,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0">
+                                            <td class="col-sm-2 text-right border-bottom-0">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -141,10 +141,10 @@
 
                                     @stack('tax_total_td_start')
                                         <tr class="row" id="tr-tax">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -154,10 +154,10 @@
 
                                     @stack('grand_total_td_start')
                                         <tr class="row" id="tr-total">
-                                            <td class="col-md-10 text-right border-right-0">
+                                            <td class="col-sm-10 text-right border-right-0">
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right long-texts">
+                                            <td class="col-sm-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/purchases/bills/item.blade.php b/resources/views/purchases/bills/item.blade.php
index 1a6df5bb9..271a9f2fa 100644
--- a/resources/views/purchases/bills/item.blade.php
+++ b/resources/views/purchases/bills/item.blade.php
@@ -1,7 +1,7 @@
 <tr class="d-flex flex-nowrap" v-for="(row, index) in form.items"
     :index="index">
     @stack('actions_td_start')
-        <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+        <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
             @stack('actions_button_start')
                 <button type="button"
                         @click="onDeleteItem(index)"
@@ -14,7 +14,7 @@
     @stack('actions_td_end')
 
     @stack('name_td_start')
-        <td class="col-md-3 border-right-0 border-bottom-0">
+        <td class="col-sm-3 border-right-0 border-bottom-0">
             @stack('name_input_start')
             <akaunting-select-remote
                 :form-classes="[{'has-error': form.errors.get('name') }]"
@@ -51,7 +51,7 @@
     @stack('name_td_end')
 
     @stack('quantity_td_start')
-        <td class="col-md-1 border-right-0 border-bottom-0">
+        <td class="col-sm-1 border-right-0 border-bottom-0">
             @stack('quantity_input_start')
                 <input class="form-control text-center"
                        autocomplete="off"
@@ -67,7 +67,7 @@
     @stack('quantity_td_end')
 
     @stack('price_td_start')
-        <td class="col-md-2 border-right-0 border-bottom-0">
+        <td class="col-sm-2 border-right-0 border-bottom-0">
             @stack('price_input_start')
                 {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
@@ -81,7 +81,7 @@
     @stack('price_td_end')
 
     @stack('taxes_td_start')
-        <td class="col-md-3 border-right-0 border-bottom-0">
+        <td class="col-sm-3 border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
             <akaunting-select
                 class="mb-0 select-tax"
@@ -123,7 +123,7 @@
     @stack('taxes_td_end')
 
     @stack('total_td_start')
-        <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
+        <td class="col-sm-2 text-right total-column border-bottom-0 long-texts">
             <akaunting-money :col="'d-none'"
                 :masked="true"
                 :error="{{ 'form.errors.get("total")' }}"
diff --git a/resources/views/sales/invoices/create.blade.php b/resources/views/sales/invoices/create.blade.php
index f413e02d7..d0ff170fe 100644
--- a/resources/views/sales/invoices/create.blade.php
+++ b/resources/views/sales/invoices/create.blade.php
@@ -29,34 +29,34 @@
 
                     {{ Form::textGroup('order_number', trans('invoices.order_number'), 'shopping-cart', []) }}
 
-                    <div class="col-md-12 mb-4">
+                    <div class="col-sm-12 mb-4">
                         {!! Form::label('items', trans_choice($text_override['items'], 2), ['class' => 'form-control-label']) !!}
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="d-flex flex-nowrap">
+                                    <tr class="row">
                                         @stack('actions_th_start')
-                                            <th class="col-md-1 border-right-0 border-bottom-0 item-action">{{ trans('general.actions') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-md-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-md-1 text-center border-right-0 border-bottom-0">{{ trans($text_override['quantity']) }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans($text_override['quantity']) }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-md-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
+                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-md-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-md-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
+                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -65,20 +65,20 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-md-11 text-right border-bottom-0"></td>
+                                            <td class="col-sm-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
                                         <tr class="row" id="tr-subtotal">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -88,7 +88,7 @@
 
                                     @stack('add_discount_td_start')
                                         <tr class="row" id="tr-discount">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -129,7 +129,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0">
+                                            <td class="col-sm-2 text-right border-bottom-0">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -140,10 +140,10 @@
 
                                     @stack('tax_total_td_start')
                                         <tr class="row" id="tr-tax">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -153,10 +153,10 @@
 
                                     @stack('grand_total_td_start')
                                         <tr class="row" id="tr-total">
-                                            <td class="col-md-10 text-right border-right-0">
+                                            <td class="col-sm-10 text-right border-right-0">
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right long-texts">
+                                            <td class="col-sm-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/sales/invoices/edit.blade.php b/resources/views/sales/invoices/edit.blade.php
index 1020b7baf..0e9804987 100644
--- a/resources/views/sales/invoices/edit.blade.php
+++ b/resources/views/sales/invoices/edit.blade.php
@@ -30,34 +30,34 @@
 
                     {{ Form::textGroup('order_number', trans('invoices.order_number'), 'shopping-cart',[]) }}
 
-                    <div class="col-md-12 mb-4">
+                    <div class="col-sm-12 mb-4">
                         {!! Form::label('items', trans_choice($text_override['items'], 2), ['class' => 'control-label']) !!}
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="d-flex flex-nowrap">
+                                    <tr class="row">
                                         @stack('actions_th_start')
-                                            <th class="col-md-1 border-right-0 border-bottom-0 item-action">{{ trans('general.actions') }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-md-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-md-1 text-center border-right-0 border-bottom-0">{{ trans($text_override['quantity']) }}</th>
+                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans($text_override['quantity']) }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-md-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
+                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-md-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-md-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
+                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -66,20 +66,20 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-md-11 text-right border-bottom-0"></td>
+                                            <td class="col-sm-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
                                         <tr class="row" id="tr-subtotal">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -89,7 +89,7 @@
 
                                     @stack('add_discount_td_start')
                                         <tr class="row" id="tr-discount">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -130,7 +130,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0">
+                                            <td class="col-sm-2 text-right border-bottom-0">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -141,10 +141,10 @@
 
                                     @stack('tax_total_td_start')
                                         <tr class="row" id="tr-tax">
-                                            <td class="col-md-10 text-right border-right-0 border-bottom-0">
+                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -154,10 +154,10 @@
 
                                     @stack('grand_total_td_start')
                                         <tr class="row" id="tr-total">
-                                            <td class="col-md-10 text-right border-right-0">
+                                            <td class="col-sm-10 text-right border-right-0">
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
-                                            <td class="col-md-2 text-right long-texts">
+                                            <td class="col-sm-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index 49c4f90ef..3c6d2540b 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -1,7 +1,7 @@
 <tr class="d-flex flex-nowrap" v-for="(row, index) in form.items"
     :index="index">
     @stack('actions_td_start')
-        <td class="col-md-1 border-right-0 border-bottom-0 item-action">
+        <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
             @stack('actions_button_start')
                 <button type="button"
                         @click="onDeleteItem(index)"
@@ -14,7 +14,7 @@
     @stack('actions_td_end')
 
     @stack('name_td_start')
-        <td class="col-md-3 border-right-0 border-bottom-0">
+        <td class="col-sm-3 border-right-0 border-bottom-0">
             @stack('name_input_start')
             <akaunting-select-remote
                 :form-classes="[{'has-error': form.errors.get('name') }]"
@@ -51,7 +51,7 @@
     @stack('name_td_end')
 
     @stack('quantity_td_start')
-        <td class="col-md-1 border-right-0 border-bottom-0">
+        <td class="col-sm-1 border-right-0 border-bottom-0">
             @stack('quantity_input_start')
                 <input class="form-control text-center"
                        autocomplete="off"
@@ -67,7 +67,7 @@
     @stack('quantity_td_end')
 
     @stack('price_td_start')
-        <td class="col-md-2 border-right-0 border-bottom-0">
+        <td class="col-sm-2 border-right-0 border-bottom-0">
             @stack('price_input_start')
                 {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
@@ -81,7 +81,7 @@
     @stack('price_td_end')
 
     @stack('taxes_td_start')
-        <td class="col-md-3 border-right-0 border-bottom-0">
+        <td class="col-sm-3 border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
             <akaunting-select
                 class="mb-0 select-tax"
@@ -123,7 +123,7 @@
     @stack('taxes_td_end')
 
     @stack('total_td_start')
-        <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
+        <td class="col-sm-2 text-right total-column border-bottom-0 long-texts">
             <akaunting-money :col="'d-none'"
                 :masked="true"
                 :error="{{ 'form.errors.get("total")' }}"