From da380cb1b09ad0eb487eb72fcf24ee5508392376 Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <tuannguyen@nine.com.au>
Date: Wed, 12 Aug 2020 12:44:36 +1000
Subject: [PATCH] controlling order

---
 src/components/home/HomeMain.tsx      | 16 ++++++++--------
 src/components/ui/containers/Grid.tsx |  6 ++++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/home/HomeMain.tsx b/src/components/home/HomeMain.tsx
index 81e925e..dc05acf 100644
--- a/src/components/home/HomeMain.tsx
+++ b/src/components/home/HomeMain.tsx
@@ -16,28 +16,28 @@ export default function HomeMain({ profile }: { profile: typeof userProfile }) {
 	return (
 		<Container>
 			<Grid smGap={3} mdGap={5} className={`sm:pt-4`} collapse={true}>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-2 md:order-none'}>
 					<AboutMe about={profile.about} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-1 md:order-none'}>
 					<GeneralInfo profile={profile.basic} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-4 md:order-none'}>
 					<WorkExperience experiences={profile.work} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-3 md:order-none'}>
 					<Skills skills={profile.skills} linkedin={profile.basic.linkedin} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-6 md:order-none'}>
 					<Awards awards={profile.awards} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-5 md:order-none'}>
 					<Education educationList={profile.education} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-8 md:order-none'}>
 					<GithubContribution githubUsername={profile.basic.githubUsername} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-7 md:order-none'}>
 					<Languages languages={profile.languages} />
 				</GridColumn>
 			</Grid>
diff --git a/src/components/ui/containers/Grid.tsx b/src/components/ui/containers/Grid.tsx
index 41611fc..994e69e 100644
--- a/src/components/ui/containers/Grid.tsx
+++ b/src/components/ui/containers/Grid.tsx
@@ -26,11 +26,13 @@ export function Grid({
 	return (
 		<div className={`flex flex-wrap overflow-hidden min-w-full ${className}`}>
 			{React.Children.map(children, (child: any, i) => {
-				const { props } = child;
+				const {
+					props: { className, ...props },
+				} = child;
 				return (
 					<GridColumn
 						key={i}
-						className={cn(` sm:py-${smGap}`, {
+						className={cn(className, ` sm:py-${smGap}`, {
 							'px-0': collapse,
 							'py-0': collapse,
 							[`px-${gap}`]: gap && !collapse,