Adjusting Post-Content and Sidebar width - works on Desktop but not mobile?

I have the following code in my custom.css

.col_full { width: 100%; }
.col_half,
.postcontent.bothsidebar { width: 48%; }
.col_one_third { width: 30.63%; }
.col_two_third { width: 65.33%; }
.col_one_fourth,
.sidebar { width: 30%; }
.col_three_fourth,
.postcontent { width: 66%; }
.col_one_fifth { width: 16.8%; }
.col_two_fifth { width: 37.6%; }
.col_three_fifth { width: 58.4%; }
.col_four_fifth { width: 79.2%; }
.col_one_sixth { width: 13.33%; }
.col_five_sixth { width: 82.67%; }
body.stretched .container-fullwidth {
	position: relative;
	padding: 0 60px;
	width: 100%;
}

And it works fine on desktop http://familyofficeinsider.com/people-news.html but on a mobile the the width of both post content and side-bar is greatly reduced compared to normal without changing the widths http://familyofficeinsider.com/a-z-family-office-wisdom.html

I have tried to look in other css responsive and bootstrap but can't see where it might be possible ?

Or is it better to be using a different content parameters such as 8cols and 4 cols ?
http://familyofficeinsider.com/test.html

Many thanks in advance

Yes many thanks I re-cnfigured the page using 8 & 4

http://familyofficeinsider.com/test.html